<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="commerce-supplier-detail">
    <el-row class="detail-row dividing">
      <Title title="基础信息" style="margin-bottom: 6px;" />
      <el-form :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage?'left':'right'" label-width="160px">
        <el-col :span="8" class="form-item">
          <el-form-item label="供应商序号：" label-width="110px">
            <div style="display: flex;align-items: center;">
              <el-tooltip v-if="detailData.supplierNum" class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ detailData.supplierNum }}</div>
                <div class="ellipsis" style="max-width:100%;display:inline-block;">{{ detailData.supplierNum }}</div>
              </el-tooltip>
              <div v-else>--</div>
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content" style="max-width:200px;">供应商序号系统自动生成</div>
                <tipIcon is-diy style="font-size:15px;color:#ccc;cursor:pointer;margin-left: 8px" />
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="供应商名称：" label-width="110px">
            <div class="flex">
              <ToolTip :content="detailData.supplierName" class="contract-name" />
              <SearchContract v-if="detailData.supplierName" :opp-company-id="supplierId" :opp-company="detailData.supplierName" :opp-company-type="1" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item indentation-form-item">
          <el-form-item :label-width="showMobilePage ? '110px' : ''" label="供应商名称(备注)：">
            <div style="display: flex;">
              <el-tooltip v-if="detailData.remark" class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ detailData.remark }}</div>
                <div
                  class="ellipsis"
                  style="max-width:100%;display:inline-block;"
                >{{ detailData.remark }}</div>
              </el-tooltip>
              <div v-else>--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="是否签约：" label-width="110px">
            <span v-if="detailData.isSign || detailData.isSign === 0" :class="{'red-bg': detailData.isSign === 0, 'green-bg': detailData.isSign}" class="bg-text">{{ detailData.isSign | signStatus }}</span>
            <span v-else-if="detailData.supplierNum" :class="{'red-bg': detailData.isSign === 0, 'green-bg': detailData.isSign}" class="bg-text">{{ detailData.supplierNum > 0 ? '是' : '否' }}</span>
            <span v-else>{{ '--' }}</span>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row class="detail-row dividing">
      <Title title="其他信息" style="margin: 22px 0 6px;" />
      <el-form :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage?'left':'right'" label-width="160px">
        <el-col :span="8" class="form-item">
          <el-form-item label="合同编号：" label-width="110px">
            <div style="display: flex;">
              <el-tooltip v-if="detailData.contactNum" class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ detailData.contactNum }}</div>
                <div
                  class="ellipsis"
                  style="max-width:100%;display:inline-block;"
                >{{ detailData.contactNum }}</div>
              </el-tooltip>
              <div v-else>--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="联系人：" label-width="110px">
            <div>{{ detailData.contactPerson || '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="联系方式：" label-width="110px">
            <SecretText :log-text="`有赞供应商${detailData.supplierNum}的联系方式`" :origin-text="detailData.contactTel" />
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="合作模式：" label-width="110px">
            <span>{{ detailData.cooperationModel | cooperationModelType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="合作状态：" label-width="110px">
            <span>{{ detailData.cooperationStatus | cooperationStatusType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="合作到期时间：" label-width="110px">
            <span>{{ detailData.expireTime || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="进项税：" label-width="110px">
            <span v-if="detailData.inputTax">{{ detailData.inputTax }} %</span>
            <span v-else>0</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="销项税：" label-width="110px">
            <span v-if="detailData.outputTax">{{ detailData.outputTax }} %</span>
            <span v-else>0</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="订单模式：" label-width="110px">
            <span>{{ detailData.orderModel | orderModelType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form-item">
          <el-form-item label="标签：" label-width="110px">
            <TagSelect v-model="detailData.tag" mode="detail" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="headerTab">
      <Title title="收款账户" font-size="16px"/>
      <PlainCreateBtn @click="accountAdd">添加收款账户</PlainCreateBtn>
    </div>
    <div class="accountcontainer">
      <accountTable ref="accountTable" :type="3" :supplier-id="supplierId" :hide-contact-person="false" @handleEdit="handleEdit"/>
    </div>
    <createDialog ref="createDailog" @updateData="updateAccountData"/>
    <fixed-pagination>
      <div v-if="!showMobilePage" class="center">
        <el-button v-if="hasRouteAuth('crm:goodsOrder:read') || isAdmin" size="small" plain class="submit-btn history-btn btn" @click="toGoodsOrder">历史订单</el-button>
        <el-button v-if="hasRouteAuth('crm:commerceSupplier:edit') || isAdmin" type="primary" size="small" class="submit-btn" @click="toEdit">编辑</el-button>
        <el-button v-if="hasRouteAuth('crm:commerceSupplier:del') || isAdmin" type="info" class="back-btn cancel-btn-style" size="small" @click="toDel">删除</el-button>
        <el-button type="info" class="back-btn cancel-btn-style" size="small" @click="toBack">返回</el-button>
      </div>
      <template v-else>
        <MoreOperateBtn>
          <el-dropdown-item v-if="hasRouteAuth('crm:goodsOrder:read') || isAdmin" style="width:80px;text-align: center" @click.native="toGoodsOrder()">
            <div>历史订单</div>
          </el-dropdown-item>
          <el-dropdown-item v-if="hasRouteAuth('crm:commerceSupplier:del') || isAdmin" style="width:80px;text-align: center" @click.native="toDel()">
            <div>删除</div>
          </el-dropdown-item>
        </MoreOperateBtn>
        <el-button v-if="hasRouteAuth('crm:commerceSupplier:edit') || isAdmin" type="primary" size="small" class="submit-btn" @click="toEdit">编辑</el-button>
        <el-button type="info" class="back-btn cancel-btn-style" size="small" @click="toBack">返回</el-button>
      </template>
    </fixed-pagination>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { moneyFilter } from '@/filters/number';
import { orderModelType, cooperationModelType, cooperationStatusType, signStatus } from '@/filters/status';
import { format } from '@/filters/date';
import { supplierInfo, supplierDel } from '@/api/commerce';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import TagSelect from '@/components/Common/tagSelect';
import accountTable from './module/accountTable';
import createDialog from './module/createDialog';
import SearchContract from '@/components/Common/SearchContract';
import mobileCreate from '@/mixins/mobileCreate';
import { showModal } from '@/utils/message';

export default {
  filters: {
    moneyFilter,
    format,
    orderModelType,
    cooperationModelType,
    cooperationStatusType,
    signStatus
  },
  components: { Title, TagSelect, accountTable, createDialog, SearchContract },
  mixins: [mobileCreate],
  data() {
    return {
      supplierId: null,
      detailData: {}
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    }
  },
  created() {
    this.supplierId = Number(this.$route.params.id) || '';
    this.getInfo();
  },
  methods: {
    hasRouteAuth,
    getInfo() {
      supplierInfo(this.supplierId).then(res => {
        this.detailData = res.data;
      }).catch(err => {
        console.error(err);
      });
    },
    accountAdd() {
      this.$refs.createDailog.openDialog(this.supplierId, 3);
    },
    handleEdit(val) {
      this.$refs.createDailog.openDialog(this.supplierId, 3, val);
    },
    updateAccountData() {
      this.$refs.accountTable.getAccountData(true);
    },
    toGoodsOrder() {
      this.$router.push({
        name: 'commerceOrder',
        query: {
          supplierName: this.detailData.supplierName
        }
      });
    },
    toEdit() {
      this.$router.push({
        name: 'commerceSupplierEdit',
        params: {
          id: this.supplierId
        }
      });
    },
    toDel() {
      showModal('是否确认删除该供应商', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: ' del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        supplierDel(this.supplierId).then(res => {
          this.$message.success('删除成功');
          this.$router.push({
            name: 'commerceSupplier'
          });
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => { return false; });
    },
    toBack() {
      this.$router.push({
        name: 'commerceSupplier'
      });
    },
    toContractList() {
      const routeUrl = this.$router.resolve({
        name: 'ContractManagement',
        query: { oppCompany: this.detailData.supplierName || '' }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.commerce-supplier-detail {
  margin: 16px;
  padding: 20px;
  background: #fff;
  padding-bottom: 55px;
  min-height: calc(100vh - 80px);
  .headerTab{
    display: flex;
    align-items: center;
    margin-top: 22px;
  }
  .btn{
    border: 1px solid #406EFF;
    color: #406EFF;
  }
  .contract-name{
    max-width: calc(100% - 70px);
  }
  .detail-row {
    .form-item {
      .el-form-item {
        margin-bottom: 0 !important;
        padding-right:10px ;
        & ::v-deep {
          .el-form-item__label {
            color: #999;
            line-height: 28px;
          }
          .el-form-item__content {
            color: #333;
            line-height: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-right: solid 1px #EBEEFD;
          }
        }
      }
    }
  }
  &::v-deep {
    .dividing{
        .el-col {
          .el-form-item__content {
            border-right: 1px solid #EBEEFD !important;
          }
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none !important;
            }
          }
          &:last-child {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
      }
  }
  .bg-text {
    width: 64px;
    height: 20px;
    padding: 0 6px;
    line-height: 20px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
  }
  .green-bg {
    background: #e2f8f2;
    color: #31cc9c;
  }
  .red-bg {
    background: #F8E2E2;
    color: #FF4E5F;
  }
  &.mobile-detail-wrap {
    padding: 12px 12px 55px 12px;
    ::v-deep .el-col {
      .el-form-item__content {
        border-right: none !important;
      }
    }
    .mobile-pagination {
      .el-button--info {
        flex: 1;
      }
      .el-button--primary {
        flex: 2;
      }
    }
    .indentation-form-item {
      ::v-deep .el-form-item__label {
        line-height: 1.5 !important;
      }
    }
  }
}
.remark-container {
  word-break: break-all;
}
.mobile-pagination {
  justify-content: center;
}
</style>

